<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <!-- <script src="../http/http.js"></script> -->
    <!-- <script src="../http/index.js"></script> -->
    <style>
        #app{
            width: 1000px;
            margin: 0 auto;
        }
        .xindie{
            margin-top: 60px;
            width: 600px;
            position: relative;
        }
        .left-img{
            width: 180px;
            height: 180px;
            float: left;
        }
        .img-right{
            width: 380px;
            height: 180px;
            margin-left: 240px;
            /* border: 1px solid red; */
            
        }
        .img-right p{
            font-size: 12px;
            color: #666666;
        }
        .jieshao{
            color: #333;
            font-size: 12px;
            font-weight: bold;
        }
        .descrip{
            text-indent: 20px;
            font-size: 12px;
            color: #666666;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <img src="i" alt="">
    <script>
        function ajax({
    method,url,success
}){
    var xhr = new XMLHttpRequest();
    xhr.open(method,url,true);
    xhr.send();
    xhr.onreadystatechange = function(){
        if(xhr.readyState ==4 && xhr.status ==200){
            var result = JSON.parse(xhr.responseText);
            success(result)
        }
    }
}
    </script>
    <script>
        var id =location.search.split("=")[1];
        // console.log(id)
        var url = `http://192.168.4.18:3000/album?id=${id}`
        ajax({
            url,method:"get",success:res=>{
                    console.log(res.album)
                    var {picUrl,description,company,name,artist}=res.album;
                    
                    var template = `
                        
                        <div class="xindie">
                            <img src=${picUrl} class="left-img">
                                <div class="img-right">
                                    <img url="../images/新碟专辑.png">
                                    <h2>${name}</h2>
                                    <p>歌手：${artist.name}</p>
                                    <p>发行时间：2020-12-06</p>
                                    <p>发行公司：${company}</p>
                                </div>
                            <p class="jieshao">专辑介绍:</p>
                            <p class="descrip">${description}</p>
                        </div>

                    `
                    $("#app").append(template)
                }
        })
    </script>
</body>
</html>